<template>
	<view>
		<fa-navbar title="消息" :is-back="false"></fa-navbar>
		<scroll-view class="pb-6" scroll-y="true">
			<u-gap height="5" bg-color="#F6F8FB"></u-gap>
			<view class="flex-between p-1">
				<view v-if="formCount.TotalCount > 0">
					<text class="h4-font-royal-blue">{{formCount.TotalCount}}</text>
					<text class="h4-font-dim-gray">条消息未读</text>
				</view>
				<view v-else>
					<text class="h4-font-dim-gray">没有消息未读</text>
				</view>
				<view class="flex-start" @click="setAllNotificationRead">
					<u-icon name="/static/images/message-clean.svg" :size="20"></u-icon>
					<text class="h4-font-royal-blue ml-x1">清除未读</text>
				</view>
			</view>
			<view class="flex-center h4-font mt-1">
				<view class="navigation">
					<view class="item" @click="toPage('FASG_NOTIFY_TYPE0006')">
						<u-badge :count="formCount.AlarmCount" type="error" :offset="[-10, -20]" size="mini"></u-badge>
						<u-icon name="/static/images/message-assets-alarm.svg" :size="60"></u-icon>
						<view class="u-line-1">报警</view>
					</view>
					<view class="item" @click="toPage('FASG_NOTIFY_TYPE0003')">
						<u-badge :count="formCount.HandleCount" type="error" :offset="[-10, -20]" size="mini"></u-badge>
						<u-icon name="/static/images/message-assets-handle.svg" :size="60"></u-icon>
						<view class="u-line-1">资产处置</view>
					</view>
					<view class="item" @click="toPage('FASG_NOTIFY_TYPE0004')">
						<u-badge :count="formCount.CheckCount" type="error" :offset="[-10, -20]" size="mini"></u-badge>
						<u-icon name="/static/images/message-assets-check.svg" :size="60"></u-icon>
						<view class="u-line-1">资产盘点</view>
					</view>
					<view class="item" @click="toPage('FASG_NOTIFY_TYPE0001')">
						<u-badge :count="formCount.AddCount" type="error" :offset="[-10, -20]" size="mini"></u-badge>
						<u-icon name="/static/images/message-assets-record.svg" :size="60"></u-icon>
						<view class="u-line-1">资产录入</view>
					</view>
				</view>
			</view>
			<u-gap class="mt-1" height="40" bg-color="#F6F8FB"></u-gap>
			<view>
				<view v-for="(item, idx) in dataList" :key="idx">
					<view v-if="idx === twoWeekIndex">
						<view class="message-gray-bg p-1">
							<text class="h4-font-light-gray">两周前的消息</text>
						</view>
					</view>
					<view class="pr-1 pl-1" @click="toReadMessage(item)">
						<view class="flex-between-center pt-min pb-min">
							<view class="flex-between-center">
								<u-icon v-if="item.Type === 'FASG_NOTIFY_TYPE0001'" name="/static/images/message-assets-record-min.svg" :size="30"></u-icon>
								<u-icon v-else-if="item.Type === 'FASG_NOTIFY_TYPE0003'" name="/static/images/message-assets-handle-min.svg"
								 :size="30"></u-icon>
								<u-icon v-else-if="item.Type === 'FASG_NOTIFY_TYPE0004'" name="/static/images/message-assets-check-min.svg"
								 :size="30"></u-icon>
								<u-icon v-else name="/static/images/message-assets-alarm-min.svg" :size="30"></u-icon>
								<text class="h3-font ml-m2">{{item.Title}}</text>
							</view>
							<view class="red-dot">
								<view class="red-dot-item">
									<u-badge v-if="item.IsRead === 0" :is-dot="true" type="error" :offset="[-10, -20]" size="mini"></u-badge>
									<view class="u-line-1 h4-font-light-gray">{{item.formatTime}}</view>
								</view>
							</view>
						</view>
						<u-gap height="4" bg-color="#F6F8FB"></u-gap>
						<view class="h4-font-dim-gray mt-m2 mb-m2">{{item.Content}}</view>
					</view>
					<u-gap height="4" bg-color="#F6F8FB"></u-gap>
				</view>
				<u-loadmore v-if="showLoadmore" :status="loadStatus" margin-top="20" @loadmore="getNotificationListByPage" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'
	export default {
		components: {
			SOtime
		},
		data() {
			return {
				dataList: [],
				twoWeekIndex: undefined,
				loadStatus: 'loading',
				showLoadmore: true,
				total: null,
				form: {
					PageIndex: 1,
					PageSize: 15
				},
				formCount: {
					AddCount: 0,
					AlarmCount: 0,
					CheckCount: 0,
					HandleCount: 0,
					TotalCount: 0
				},
			};
		},
		onShow() {
			this.form.PageIndex = 1;
			this.getNotificationListByPage();
			this.getUnReadStatistics();
		},
		onLoad() {
			
		},
		onReachBottom() {
			// 分页加载
			this.loadStatus == 'nomore' ? null : this.getNotificationListByPage();
			this.getUnReadStatistics();
		},
		beforeDestroy() {
			//关闭socket
			uni.closeSocket(res => {
				console.log('WebSocket 已关闭！');
			})
		},

		methods: {
			toPage(type) {
				let link = `/pages/message/readListMessage?Type=${type}`;
				uni.navigateTo({
					url: link
				})
			},

			toReadMessage(item) {
				let params = {
					Guid: item.Guid,
					IsRead: 1
				}
				this.$api.setUpdateReadState(params)
					.then(res => {
						console.log(res.data);
					})
					.catch(err => console.error(err));
				if (item.Type == 'FASG_NOTIFY_TYPE0001') return
				if (item.Type == 'FASG_NOTIFY_TYPE0004002') return
				// 站内信 后端增加ObjectGuid，为统一使用公共函数，将赋值给Guid字段
				item.Guid = item.ObjectGuid;
				this.$store.dispatch('messageToPage', item)
				// uni.navigateTo({
				// 	url: '/pages/message/readMessage?guid=' + item.Guid + "&type=" + item.Type + "&content=" + item.Content
				// })
			},

			getNotificationListByPage() {
				this.$api.getNotificationListByPage(this.form)
					.then(res => {
						//console.log(res.data)
						if (res.code == 0) {
							this.total = res.data.Total;
							if (this.form.PageIndex > 1) {
								this.dataList = this.dataList.concat(res.data.Data)
							} else {
								this.dataList = res.data.Data
							}
							this.twoWeekIndex = -1
							for (var i = 0; i < this.dataList.length; i++) {
								if (SOtime.time7(this.dataList[i].CreateTime)) {
									this.twoWeekIndex = i;
								}
								this.dataList[i].formatTime = SOtime.time6(this.dataList[i].CreateTime);
								//this.setUpdateReadState(this.dataList[i].Guid)
							}
							// 分页加载
							if (res.data.Page == res.data.TotalPage) {
								this.showLoadmore = false
								this.loadStatus = 'nomore'
							} else {
								this.loadStatus = 'loadmore'
							}
							if (this.dataList.length == 0) {
								this.showLoadmore = false
							}
							this.form.PageIndex = this.form.PageIndex + 1;
						} else {
							// 分页加载
							this.showLoadmore = false;
							this.loadStatus = 'nomore'
						}
					})
					.catch(err => console.error(err));
			},

			getUnReadStatistics() {
				let params = {
					StartTime: null,
					EndTime: null
				}
				this.$api.getUnReadStatistics(params)
					.then(res => {
						console.log(res.data);
						if (res.data.Total > 0) {
							uni.setTabBarBadge({
								index: 2,
								text: res.data.Total > 99 ? '99+' : String(res.data.Total)
							})
						}else {
							uni.removeTabBarBadge({ index: 2 })
						}
						this.formCount.AddCount = 0;
						this.formCount.AlarmCount = 0;
						this.formCount.CheckCount = 0;
						this.formCount.HandleCount = 0;
						if (res.code == 0) {
							this.formCount = res.data
							this.formCount.TotalCount = this.formCount.AddCount + this.formCount.AlarmCount + this.formCount.CheckCount +
								this.formCount.HandleCount;
						}
					})
					.catch(err => console.error(err));
			},

			setUpdateReadState(guid) {
				let params = {
					Guid: guid,
					IsRead: 0
				}
				this.$api.setUpdateReadState(params)
					.then(res => {
						console.log(res.data);
					})
					.catch(err => console.error(err));
			},

			setAllNotificationRead() {
				this.$api.setAllNotificationRead()
					.then(res => {
						for (var i = 0; i < this.dataList.length; i++) {
							this.dataList[i].IsRead = 1;
						}
						this.formCount.AddCount = 0;
						this.formCount.AlarmCount = 0;
						this.formCount.CheckCount = 0;
						this.formCount.HandleCount = 0;
						this.formCount.TotalCount = 0;
						uni.removeTabBarBadge({ index: 2 })
					})
					.catch(err => console.error(err));
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navigation {
		display: flex;

		.item {
			margin: 0 40rpx;
			text-align: center;
			position: relative;
		}
	}

	.red-dot {
		display: flex;

		.red-dot-item {
			text-align: center;
			position: relative;
		}
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.message-gray-bg {
		background-color: #F6F8FB;
	}
</style>
